<template>
	<!-- 页面内容--基本信息页面 -->
	<view style="width: 100vw;height: fit-content;background-color: #1F2022; color: #fff;">
		<formheadVue :headname="$t('basic.info')" :pagenum='4'></formheadVue>
		<view class="P-head">
			<view class="P-1">
				<image src="../../static/setpfour.png" mode=""></image>
			</view>
			<view class="P-2" style="margin-top: 20px;">
				<view class="P-2-title flexrowstart">
					<image src="../../static/idcardicon.png" mode=""></image>
					<text class="gradient-text">{{$t('basic.info')}}</text>
				</view>
			</view>
			<!-- input框  -->
			<view>
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('basic.line')}}</text>
				</view>
				<view class="P-5" :style="getBorderStyle(line)">
					<uni-easyinput style="height: 100%;" maxlength="25" :styles="from.styles"
						:placeholderStyle="from.placeholderStyle" @blur="endTiming('line')" @focus="startTiming('line')"
						:placeholder="$t('pleaseinput')" v-model="line"></uni-easyinput>
				</view>
			</view>
			<view>
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('basic.fb')}}</text>
				</view>
				<view class="P-5" :style="getBorderStyle(fbvalue)">
					<uni-easyinput style="height: 100%;" :styles="from.styles" maxlength="100"
						:placeholderStyle="from.placeholderStyle" @blur="endTiming('fbvalue')"
						@focus="startTiming('fbvalue')" :placeholder="$t('pleaseinput')"
						v-model="fbvalue"></uni-easyinput>
				</view>
			</view>
			<view>
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('basic.Email')}}</text>
				</view>
				<view class="P-5" :style="getBorderStyle(email)">
					<uni-easyinput style="height: 100%;" :styles="from.styles" :placeholderStyle="from.placeholderStyle"
						@focus="startTiming('email')" :placeholder="$t('pleaseinput')" v-model="email"
						@blur="validateEmail()" maxlength="50"></uni-easyinput>
				</view>
				<p v-if="!handleEmail" style="width: 80%; color:#FDF57C">{{$t('basic.Emailerrortips')}}</p>
			</view>
			<!-- xiala -->
			<view>
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('basic.education')}}</text>
				</view>
				<view class="P-5" @click="clickeFun('educationalCode')" style="padding: 0rpx;">
					<uni-data-select :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="educationalCode"
						@change="handleSelectChange('educationalCode')" :style="getBorderStyle(educationalCode)"
						:localdata="dropdowns.educational" class="xiala"></uni-data-select>
				</view>
			</view>
			<view>
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('basic.maritalStatus')}}</text>
				</view>
				<view class="P-5" @click="clickeFun('maritalStatusCode')" style="padding: 0rpx;">
					<uni-data-select  placement='top' :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="maritalStatusCode" @iconClick="iconClick()"
						:style="getBorderStyle(maritalStatusCode)" :localdata="dropdowns.maritalStatus"
						@change="handleSelectChange('maritalStatusCode')" class="xiala"></uni-data-select>
				</view>
			</view>
			<view>
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('basic.childnum')}}</text>
				</view>
				<view class="P-5" @click="clickeFun('numberOfChildrenCode')" style="padding: 0rpx;">
					<uni-data-select placement='top' :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="numberOfChildrenCode"
						:style="getBorderStyle(numberOfChildrenCode)" :localdata="dropdowns.numberOfChildren"
						@change="handleSelectChange('numberOfChildrenCode')" class="xiala"></uni-data-select>
				</view>
				<view style="margin-top: 30rpx;">
					<view @click="fn1()" class="P-2 flexcenter">
						<p> {{$t('continue')}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import setDot from '@/pages/utils/setdot.js';
	import formheadVue from '../../components/formhead.vue';
	import api from '@/pages/utils/api.js'
	import setfengkongDot from '@/pages/utils/fengkong.js';
	import getDroupMeunFun from '@/pages/utils/getDroupMeun.js'
	export default {
		data() {
			return {
				handleClick: false, //默认没点击,
				from: {
					placeholderStyle: "color:#555555;font-size:15px;",
					styles: {
						color: '#555555',
						borderColor: '#2979FF',
					}
				},
				dropdowns: {
					educational: [], //教育
					maritalStatus: [], //婚姻
					numberOfChildren: [], //子女
				},
				educationalCode: '',
				maritalStatusCode: '',
				numberOfChildrenCode: '',
				email: '',
				line: '',
				fbvalue: '',
				handleEmail: true,
				startTimes: {}, // 记录每个输入框的开始时间
				fillTimes: { // 存储填写时长
					educationalCode: 0,
					maritalStatusCode: 0,
					numberOfChildrenCode: 0,
					email: 0,
					line: 0,
					fbvalue: 0,
					page: 0
				},
			};
		},
		computed: {
			getBorderStyle() {
				return (value) => {
					return this.checkempty(value) ? {
						border: '6rpx solid #FDF57C',
						borderRadius: '40rpx',
						width: '100%'
					} : {};
				};
			},
		},
		components: {
			formheadVue
		},
		onShow() {
			this.startTiming('page')
			//重新计算下拉框的填写时长
			this.clearSelectStartFlags()
			this.loadDropdownData();
		},
		created() {
			console.log('created');

		},
		methods: {
			async loadDropdownData() {
				try {
					const types = ["educational", "maritalStatus",
						"numberOfChildren"
					];
					const promises = types.map(type => getDroupMeunFun(type));

					const results = await Promise.all(promises);
					types.forEach((type, index) => {
						this.dropdowns[type] = results[index]?.map(item => ({
							value: item.ggbb,
							text: item.cjfu
						})) || [];
					});
					// console.log("下拉数据", this.dropdowns);
					// this.getformData()
				} catch (error) {
					console.error("获取下拉数据失败", error);
				}
			},
			getformData() {
				let params = {
					vjeu: '1'
				}
				api.getUserInfo(params).then(data => {
					console.log('表格数据回显', data);
					this.educationalCode = data.qzzh || ''
					this.maritalStatusCode = data.jteh || ''
					this.email = data.mbea || ''
					this.line = data.ngbj || ''
					this.fbvalue = data.ovsu || ''
					this.numberOfChildrenCode = data.dobr || ''
					console.log('数据回显梳理完毕', '邮箱', this.email);
				})
			},
			validateEmail() {
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (emailRegex.test(this.email)) {
					console.log("邮箱验证通过，继续后续操作...");
					this.endTiming('email')
					this.handleEmail = true
					return true;
				} else {
					this.endTiming('email')
					this.handleEmail = false
					return false;
				}
			},
			checkempty(name) {
				// console.log('name-->', name);
				if (name == '' && this.handleClick) {
					// console.log('显示红框');
					return true
				} else {
					// console.log('不显示红框');
					return false
				}
			},
			fn1() {
				this.handleClick = true
				console.log('educationalCode', this.educationalCode);
				console.log('maritalStatusCode', this.maritalStatusCode);
				console.log('numberOfChildrenCode', this.numberOfChildrenCode);
				console.log('email', this.email);
				console.log('line', this.line);
				console.log('fbvalue', this.fbvalue);
				const requiredFields = [
					'educationalCode',
					'maritalStatusCode',
					'numberOfChildrenCode',
					'email',
					'line',
					'fbvalue'
				];
				const cansubmit = requiredFields.every(field => this[field] !== '');
				console.log('可以提交了吗', cansubmit, "邮箱格式正确吗", this.handleEmail);
				if (cansubmit && this.handleEmail) {
					let params = {
						vjeu: '1',
						qzzh: this.educationalCode, //educational
						jteh: this.maritalStatusCode, //maritalStatus
						dobr: this.numberOfChildrenCode, //numberOfChildren
						mbea: this.email,
						ngbj: this.line,
						ovsu: this.fbvalue //facebookEmail
					}
					api.uploadUserInfo(
						params
					).then(data => {
						console.log('存储成功');
						this.endTiming('page')
						//页面停留总时长、
						setfengkongDot('BasicDataPageStopDurationALL', this.fillTimes.page)
						//填写总时长
						setfengkongDot('BasicDataPageCompleteDurationALL',
							Number(this.fillTimes.educationalCode || 0) +
							Number(this.fillTimes.maritalStatusCode || 0) +
							Number(this.fillTimes.numberOfChildrenCode || 0) +
							Number(this.fillTimes.email || 0) +
							Number(this.fillTimes.lline || 0) +
							Number(this.fillTimes.fbvalue || 0)
						)
						console.log('this.fillTimes', this.fillTimes);

						setfengkongDot('FacebookCompleteDuration', this.fillTimes.fbvalue)
						setfengkongDot('LineCompleteDuration', this.fillTimes.line)
						setfengkongDot('MaritalStatusCompleteDuration', this.fillTimes.maritalStatusCode)
						setfengkongDot('KidsCompleteDuration', this.fillTimes.numberOfChildrenCode)
						setfengkongDot('EducationCompleteDuration', this.fillTimes.educationalCode)
						setDot('CLICK_BASIC_INF_SUBMIT');
						uni.navigateTo({
							url: '/pages/demo3/demo3',
							animationType: 'slide-in-right',
							animationDuration: 200
						});
						//重新计算下拉框的填写时长
						this.clearSelectStartFlags()
					})
				}
			},
			// 开始计时
			startTiming(field) {
				this.startTimes[field] = Date.now();
			},
			// 结束计时并计算时长
			endTiming(field) {
				console.log('计算结束时长', field);
				if (this.startTimes[field]) {
					const endTime = Date.now();
					this.fillTimes[field] = endTime - this.startTimes[field];
					this.startTimes[field] = null; // 重置
				}
			},
			clickeFun(field) {
				const key = `${field}Changebegin`;
				if (!uni.getStorageSync(key)) {
					this.startTiming(field);
					uni.setStorageSync(key, true)
				}
			},
			handleSelectChange(field) {
				const key = `${field}Changebegin`;
				if (uni.getStorageSync(key)) {
					this.endTiming(field);
				}
			},
			clearSelectStartFlags() {
				const keys = [
					'educationalCodeChangebegin',
					'maritalStatusCodeChangebegin',
					'numberOfChildrenCodeChangebegin',
				];
				keys.forEach(key => uni.removeStorageSync(key));
			}
		}
	}
</script>

<style lang="scss" scoped>

	.P-5 {
		width: 100%;
		background-image: url('/static/inputborder.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
		height: 100rpx;
	}

	::v-deep .uni-input-input {
		font-size: 16px !important;
	}

	::v-deep .uni-input-placeholder {
		color: #999 !important;
		font-size: 16px !important;
	}

	.P-head {
		width: 100%;
		background-color: #1F2022;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: -110rpx;


		image {
			width: 100rpx;
			height: 100rpx;
		}
	}


	.P-1 {
		margin-top: 20px;

		image {
			width: 100%;
			height: 100rpx;
		}
	}

	.P-2 {
		width: 100%;
		margin: 20rpx 0rpx;

		.P-2-title {
			height: 100rpx;
			background-image: url('../../static/tipsbg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 0rpx 20rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 40rpx;
			}
		}

		.gradient-text {
			background: linear-gradient(to bottom, rgba(204, 154, 243, 1), #F9E4B7);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
			font-size: 32rpx;
			/* 根据需要调节 */
		}

		p {
			width: 86%;
			height: 90rpx;
			background-color: #FFF584;
			text-align: center;
			color: #000;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			// animation: pulsebtn 1.2s ease-in-out infinite;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		@keyframes pulsebtn {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.08);
			}

			100% {
				transform: scale(1);
			}
		}

	}

	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
</style>